<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建元素、添加元素、删除元素</title>
    <script src="lib/jQuery-v3.6.0.min.js"></script>
  </head>
  <body>
    <ul>
      <li>我是 li 元素</li>
    </ul>
    <div class="test-div">我是 div 元素</div>

    <script>
      $(function () {
        // 1、创建元素
        var li = $('<li>我是新添加的 li 元素</li>')
        var div = $('<div>我是新添加的 div 元素</div>')

        // 2、添加元素
        // 2.1、内部添加，添加到目标元素的后面
        // $('ul').append(li)

        // 2.2、内部添加，添加到目标元素的前面
        $('ul').prepend(li)

        // 2.3、外部添加，添加到目标元素的后面
        // $('.test-div').after(div)

        // 2.4、外部添加，添加到目标元素的前面
        $('.test-div').before(div)

        // 3、删除元素
        // 3.1、删除本身和子元素
        // $('ul').remove()

        // 3.2、删除子元素留本身
        $('ul').empty()
      })
    </script>
  </body>
</html>
